<template>
  <div class="chart_container">
    <div class="chart_header">
      <div class="chart_title">模块通过率对比</div>
      <el-select
        v-model="select_item"
        placeholder="请选择测试记录"
        style="width: 240px"
        @change="handleSelectChange"
      >
        <el-option
          v-for="item in test_record_list"
          :key="item.recordId"
          :label="iso8601ToTime(item.createTime)"
          :value="item.recordId"
        />
      </el-select>
    </div>
    <div class="canvars" ref="myRef"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import { iso8601ToTime } from "@/utils/index";


const select_item = ref("");
const myRef = ref(null); // 获取dom实例
const props = defineProps({
  // 获取父组件传过来的数据
  dataInfo: {
    type: Object,
    default: () => ({}), // 必须使用箭头函数返回对象
  },
  test_record_list: {
    type: Array,
    default: () => [], // 数组默认值必须通过工厂函数返回
  },
  testActive: {
    type: String,
    default: "",
  },
});
const $emit = defineEmits(["query"]);
const xAxisData = ref([]); //横向数据
const yAxisData = ref([]); //竖向数据
watch(
  () => props.dataInfo,
  (new_value) => {
    xAxisData.value = [];
    yAxisData.value = [];
    if (new_value) {
      Object.keys(new_value).forEach((key) => {
        console.log('key',key);
        xAxisData.value.push(key);
      });
      Object.values(new_value).forEach((value) => {
        console.log('value',value + "%");
        yAxisData.value.push(value);
      });
      renderChart(); // 生命周期挂载函数渲染图表
    }
  }
);
watch(
  () => props.testActive,
  (new_value) => {
    select_item.value = new_value;
  }
);

onMounted(() => {});

const myChart = ref(null);
const renderChart = () => {
  myChart.value = echarts.init(myRef.value);
  myChart.value.setOption({
    title: {},
    tooltip: {
      formatter: function(params) {
        // 在提示框中显示百分比
        return `${params.name}: ${params.value}%`;
      }
    },
    xAxis: {
      data: xAxisData.value,
    },
    yAxis: {
      type: 'value',
      min: 0,       // 最小值设为0%
      max: 100,     // 最大值设为100%
      axisLabel: {
        formatter: '{value}%' // Y轴显示百分比
      }
    },
    series: [
      {
        name: "通过率",
        type: "bar",
        data: yAxisData.value,
        barMaxWidth: 50, // 设置柱子最大宽度
        // label: {
        //   show: true,
        //   position: 'top',
        //   formatter: function(params) {
        //     // 在柱状图上显示百分比
        //     return params.value + '%';
        //   }
        // },
      },
    ],
  });
};

const handleSelectChange = (value) => {
  console.log(value);
  $emit("query", value);
};
</script>

<style scoped lang="scss">
.chart_container {
  width: 100%;
  height: 100%;
  .chart_header {
    display: flex;
    align-items: center;
    .chart_title {
      font-weight: 700;
      font-size: 19px;
      color: #606060;
      padding: 0 24px;
    }
  }
}
.canvars {
  width: 100%;
  height: 100%;
  min-height: 400px;
}
</style>
